隆Hola 馃憢! Espera mientras comienza la sesi贸n.
Antes que todo, 驴c贸mo est谩n?
Visualizaci贸n de Informaci贸n
IIC2026 2021-2
Repaso general 28/10/2021
Visualizaci贸n de Informaci贸n
IIC2026 2021-2
Visualizaci贸n de Informaci贸n hasta ahora
Visualizaci贸n de Informaci贸n hasta ahora
Visualizaci贸n de datos tabulares
Visualizaci贸n de datos espaciales
Manipulaci贸n de vista
Facet
Reducci贸n de datos
Selecciones y join de datos en D3
Utilidades de D3 I
Utilidades de D3 II
Layouts tabulares en D3
Zooming y panning en D3
Saltamos entre nivel 3 y 4 del modelo
Caracterizaci贸n de dominio
Abstracci贸n de datos y tareas
Codificaci贸n visual y de interacci贸n
Implementaci贸n algor铆tmica
Codificaci贸n visual y de interacci贸n
驴Qu茅 marcas y canales ocupar茅?
驴Ocupar茅 interacci贸n de alguna forma?
Codificaci贸n visual y de interacci贸n
驴Qu茅 marcas y canales ocupar茅?
驴Ocupar茅 interacci贸n de alguna forma?
- Principios de expresividad y efectividad
- Principios de IHC y dise帽o
- Consideraciones de percepci贸n por canales espec铆ficos: color
- Consideraciones para datos espec铆ficos: tabulares
- Consideraciones para datos espec铆ficos: geom茅tricos
- Mi situaci贸n tiene complejidad, 驴qu茅 opciones de estrategias tengo para afrontarlo?
Codificaci贸n visual y de interacci贸n
El modelo de trabajo no es un camino directo hacia la mejor soluci贸n de visualizaci贸n.
- Conocer tantos tipos de decisiones y sub-decisiones de dise帽o nos expande el repertorio de posibilidades. (Las visualizaciones del d铆a tambi茅n ayudan a eso)
- Los principios nos dan direcciones a seguir.
- El ideal ser铆a encontrar varias posibles opciones v谩lidas que satisfacen una situaci贸n.
- Y luego decidir una.
Relevante para Entrega 2 e Hito 2
Intro a la web: HTML, CSS y SVG
Intro a la web: JS y D3
Selecciones y join de datos en D3
Utilidades de D3 I
Utilidades de D3 II
Layouts tabulares en D3
Zooming y panning en D3
Visualizaci贸n de datos espaciales
Consejos para Hito 2 basados en Entrega 2
Consejos para Hito 2 basados en Entrega 2
Si tienen dudas de conceptos espec铆ficos, comentenlos por el chat y los responderemos despu茅s.
Lista de funcionalidades y/o requerimientos
Si bien se espec铆fican funcionalidades en grupos, estos grupos no son m谩s que para ordenar los objetivos.
Lista de funcionalidades y/o requerimientos
Si bien se espec铆fican funcionalidades en grupos, estos grupos no son m谩s que para ordenar los objetivos.
Consejo: Avancen seg煤n elementos en la lista y verifiquen lo que se espera con la r煤brica
Lista de funcionalidades y/o requerimientos
Si bien se espec铆fican funcionalidades en grupos, estos grupos no son m谩s que para ordenar los objetivos.
Consejo: Avancen seg煤n elementos en la lista y verifiquen lo que se espera con la r煤brica
Consejo: La r煤brica es la fuente de la verdad, no el ejemplo adjunto.
Consejo: Seguir m铆nimos de implementaci贸n
Versi贸n 6 o 7 de D3.js y CSS de ustedes, no otras librer铆as o frameworks a menos que explicitamente dicho.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>T铆tulo de herramienta</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
...
<script src='programa.js' charset='utf-8'></script>
</body>
</html>
Consejo: Creanse el cuento de la evaluaci贸n, est谩n desarrollando una herramienta para alguien.
Consejo: Creanse el cuento de la evaluaci贸n, est谩n desarrollando una herramienta para alguien.
- No usen de t铆tulo "Evaluaci贸n" o "Hito 2".
- Piensen en la presentaci贸n de la informaci贸n.
Consejo: Creanse el cuento de la evaluaci贸n, est谩n desarrollando una herramienta para alguien.
- No usen de t铆tulo "Evaluaci贸n" o "Hito 2".
- Piensen en la presentaci贸n de la informaci贸n.
Consejo: No solo las visualizaciones son importantes en una herramienta, tambi茅n lo son los elementos contextuales.
Consejo: Creanse el cuento de la evaluaci贸n, est谩n desarrollando una herramienta para alguien.
- No usen de t铆tulo "Evaluaci贸n" o "Hito 2".
- Piensen en la presentaci贸n de la informaci贸n.
Consejo: No solo las visualizaciones son importantes en una herramienta, tambi茅n lo son los elementos contextuales.
- Recuerden agregar el t铆tulo, contexto y fuente de datos (est谩 en r煤brica).
- Recuerden agregar t铆tulos a gr谩ficos individuales y t铆tulos a ejes.
Consejo: Utilizar join de datos cuando puedan. D3 se basa en esto.
Consejo: Utilizar join de datos cuando puedan. D3 se basa en esto.
for(let i = 0; i < 5; i++) {
const color = ...
const d = ...
contenedor
.append("path")
.attr("color", color)
.attr("d", d)
...
}
Consejo: Utilizar join de datos cuando puedan. D3 se basa en esto.
contenedor
.selectAll("path")
.data(elementos)
.enter()
.append("path")
.attr("color", ...)
.attr("d", ...)
...
Consejo: Utilizar join de datos cuando puedan. D3 se basa en esto.
const select = document.getElementById("select");
datos.forEach(d => {
const option = document.createElement("option");
option.value = d;
option.text = d;
select.appendChild(option)
});
Consejo: Utilizar join de datos cuando puedan. D3 se basa en esto.
d3.select("#select")
.selectAll("option")
.data(datos)
.enter()
.append("option")
.attr("value", d => d)
.text(d => d);